<template lang="html">
    <div style="background-color: #e8e8e6;">
        <DetailsSwiper v-if="reFresh" class="DetailsSwiper" ref="DetailsSwiper"/>
        <DetailsTitle ref="DetailsTitle"/>
        <DetailsAddress ref="DetailsAddress"/>
        <DetailsIntroduce ref="DetailsIntroduce"/>
          <el-drawer
      v-show="drawer"
      :visible.sync="drawer"
      :with-header="false"
      :append-to-body="true"
      direction="btt"
      
    >
      <DetailsPopupMain @close="close" :lists="list" />
    </el-drawer>
    </div>
   
</template>

<script>
import DetailsSwiper from "../components/Details/DetailsSwiper";
import DetailsTitle from "../components/Details/DetailsTitle";
import DetailsIntroduce from "../components/Details/DetailsIntroduce";
import DetailsAddress from "../components/Details/DetailsAddress";
import DetailsPopupMain from "../components/Details/DetailsPopupMain";
import DetailsBottomMenuBar from "../components/Details/DetailsBottomMenuBar";
import {getdetailsById} from '@/api/product'
export default {
  components: {
    DetailsSwiper,
    DetailsTitle,
    DetailsIntroduce,
    DetailsAddress,
    DetailsBottomMenuBar,
    DetailsPopupMain,
  },
  data() {
    return {
      list: null,
      reFresh:true,
      drawer: false,
    };
  },
  created() {
    
  },
  watch:{
       list(){
         this.reFresh= false
         this.$nextTick(()=>{
          this.reFresh = true
        })
      }
    },
  methods: {
      getDetail(id){  
      getdetailsById(id).then(res => {
        this.list = res.data
        setTimeout(()=>{
          this.$refs.DetailsAddress.setList(res.data);
        this.$refs.DetailsSwiper.setList(res.data);
        this.$refs.DetailsTitle.setList(res.data.product);
        this.$refs.DetailsIntroduce.setList(res.data.product);
        },10)
      })            
      .catch((err) => {
        console.log(err);
      });
    },
    close() {
      this.drawer = false;
    },
    open() {
      this.drawer = true;
    },
  },
};
</script>

<style lang="less" scoped>

</style>
